<template>
  <p>{{codeRef}}</p>
  <p>{{ name + age + code}}</p>

  <button @click="change">更变</button>
</template>

<script setup lang='ts'>
import { toRef, reactive, toRefs, toRaw } from 'vue'

const htx = reactive({name: '孙小双', age: 22, code: 'sunxiaoshuang'})

// toRef: 针对响应式对象的值做解构修改
const codeRef = toRef(htx, 'code')
// toRefs: 解构操作
const { name, age, code } = toRefs(htx)
// toRaw: 获取原始对象（__v_raw）


const change = () => {
  htx.name = '华天晓'
}
</script>

<style lang='scss' scoped>

</style>